<template>
	<div>
		<div class="topTitle">意见反馈</div>
		<el-form inline :model="query" label-width="80px">
			<el-form-item label="模糊搜索">
				<el-input placeholder="请输入反馈用户昵称、手机号" v-model="query.key" class="width260 margin-right10"></el-input>
			</el-form-item>
			<el-form-item label="反馈时间">
				<el-date-picker v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="onDateChange">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" class="margin-left10" @click="handleSearch">搜索</el-button>
				<el-button type="default" icon="el-icon-refresh-right" @click="handleRefresh">重置</el-button>
			</el-form-item>
		</el-form>
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="意见反馈" name="first"></el-tab-pane>
			<el-tab-pane label="搜题反馈" name="second"></el-tab-pane>
		</el-tabs>
		<el-table :data="tableData" border class="table" header-cell-class-name="table-header-style">
			<el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
			<el-table-column label="反馈用户" align="center" prop="userName"></el-table-column>
			<el-table-column label="手机号" align="center" prop="userPhone"></el-table-column>
			<el-table-column prop="content" label="反馈内容" align="center"></el-table-column>
			<el-table-column prop="version" label="反馈图片" align="center">
				<template slot-scope="scope">
					<img width="100px" class="margin-right10" height="auto" :src="item"
						v-for="item in (scope.row.images||'').split(',')" :key="item" alt="">
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="反馈时间" align="center"></el-table-column>
			<el-table-column label="操作" align="center" width="100">
				<template slot-scope="scope">
					<el-popconfirm title="确认删除？" @confirm="handleDel(scope.row.id)">
						<el-button slot="reference" type="text">删除</el-button>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<div class="margin-top10">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[30, 40, 50, 60]"
				@size-change="handleSizeChange" :current-page="query.pageNumber" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'categoryTable',
		data() {
			return {
				query: {
					type: 1,
					pageNumber: 1,
					pageSize: 30
				},
				tableData: [],
				multipleSelection: [],
				delList: [],
				editVisible: false,
				pageTotal: 0,
				form: {},
				idx: -1,
				id: -1,
				activeName: 'first',
				dateTime: []
			};
		},
		created() {
			this.getData();
		},
		methods: {
			//删除
			async handleDel(id) {
				const res = await this.$post('/admin/feedBack/feedBackdeletedAll', [id])
				if (res.code == 1000) {
					this.$message.success('删除成功')
					this.getData()
				}
			},
			handleClick(tab) {
				this.query.type = Number(tab.index) + 1
				this.getData()
			},
			//反馈时间变动
			onDateChange(val) {
				if (val.length == 0) {
					this.query.startTime = ''
					this.query.endTime = ''
				} else {
					this.query.startTime = val[0]
					this.query.endTime = val[1]
				}
			},
			handleSizeChange(val) {
				this.query.pageSize = val
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/feedBack/pageFeedBack', this.query)
				if (res.code == 1000) {
					this.tableData = res.data.list
					this.pageTotal = res.data.totalRow
				}
			},
			// 触发搜索按钮
			handleSearch() {
				this.query.pageNumber = 1
				this.getData();
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNumber: 1,
					pageSize: 30
				}
				this.dateTime = []
				this.getData();
			},
			// 编辑操作
			handleEdit(index, row) {
				this.idx = index;
				this.form = row;
				this.editVisible = true;
			},

			// 分页导航
			handlePageChange(val) {
				this.query.pageNumber = val
				this.getData();
			}
		}
	};
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 100px;
		display: inline-block;
	}

	.table {
		width: 100%;
		font-size: 16px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}
</style>